<template>
    <div class="custom_media">
        <el-image v-if="fileType === 'image'" style="width: 150px; height: 100px"
                  :src="playerOptions.src" :preview-src-list="[playerOptions.src]">
        </el-image>
        <div class="player_area" v-if="fileType === 'video' && options.isNotDialog">
            <video-player class="video-player vjs-custom-skin"
                          ref="videoPlayer" :playsinline="true" :options="playerOptions">
            </video-player>
        </div>

        <el-dialog class="videoDialog" :title="videoDialogOption.title" :visible.sync="videoDialogOption.visible"
                   :width="videoDialogOption.width" v-dialogDrag append-to-body>
            <div class="videoDialog_content">
                <video-player class="video-player vjs-custom-skin"
                              ref="videoPlayer" :playsinline="true" :options="playerOptions">
                </video-player>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="videoDialogOption.visible = false">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import fileApi from '@common/api/fileApi';

    export default {
		name: "CustomMedia",
        props: {
            options: {
                type: Object,
                default: () => {
                    return {
                        isNotDialog: false
                    };
                }
            }
        },
        data () {
            return {
                videoDialogOption: {
                    visible: false,
                    title: '视频播放',
                    width: '500px',
                },
                defaultOption: {
                    //播放速度
                    playbackRates: [0.5, 1.0, 1.5, 2.0],
                    //如果true,浏览器准备好时开始回放。
                    autoplay: false,
                    // 默认情况下将会消除任何音频。
                    muted: false,
                    // 导致视频一结束就重新开始。
                    loop: false,
                    // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    preload: 'auto',
                    language: 'zh-CN',
                    // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    aspectRatio: '16:9',
                    // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    fluid: true,
                    sources: [{
                        //类型
                        type: "video/mp4",
                        //url地址
                        src: ''
                    }],
                    //你的封面地址
                    poster: '',
                    //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    notSupportedMessage: '此视频暂无法播放，请稍后再试',
                    controlBar: {
                        timeDivider: true,
                        durationDisplay: true,
                        remainingTimeDisplay: false,
                        //全屏按钮
                        fullscreenToggle: true
                    }
                },
                fileApiUrl: fileApi.url,
                fileType: '',
                imageTypes: ['.png', '.jpg', '.jpeg', '.bmp', '.gif', '.svg'],
                videoTypes: ['.mp4', '.mpeg4', '.ogg', '.webm', '.wmv', '.mpg', '.flv'],
                playerOptions: {},
            };
        },
        watch: {
            options() {
                this.initData();
            },
        },
        mounted () {
            this.initData();
        },
        methods: {
            getFileType(type) {
                if (this.imageTypes.indexOf(type.toLowerCase()) !== -1) {
                    return 'image';
                } else if (this.videoTypes.indexOf(type.toLowerCase()) !== -1) {
                    return 'video';
                }
                return 'text';
            },
            initData() {
                let $this = this;
                $this.fileType = '';
                $this.showOption = $.extend({}, $this.defaultOption, $this.options);
                if ($this.$utils.isNotEmpty($this.options.fileType)) {
                    $this.fileType = $this.options.fileType;
                }
                if ($this.$utils.isNotEmpty($this.options.fileId)) {
                    fileApi.getFileInfo($this.options.fileId, result => {
                        let fileInfo = result.data;
                        $this.fileType = $this.getFileType(fileInfo.fileType);
                        if ($this.fileType === 'video') {
                            $this.playerOptions = $.extend({}, $this.defaultOption, {
                                sources: [{
                                    //类型
                                    type: "video/" + fileInfo.fileType.replace('.', ''),
                                    //url地址
                                    src: $this.fileApiUrl.getVideo + fileInfo.id
                                }]
                            });
                            $this.videoDialogOption = $.extend({}, $this.videoDialogOption, {
                                visible: !$this.options.isNotDialog,
                            });
                        } else {
                            $this.playerOptions = $.extend({}, {
                                src: $this.fileApiUrl.getFile +$this.$utils.getAccountSetSidEndWithSlash()+ fileInfo.id,
                                fileType: fileInfo.fileType
                            });
                        }
                    });
                }
            },
        },
	}
</script>

<style lang="less" rel="stylesheet/less" scoped>
    .custom_media {

    }
</style>
